<template>
        <div style="background-color: #eeeeee; height: 100%; padding-top: 30px;">
                <div class="statistic-info">
                        <template v-for="(item) in statisticsInfo">
                                <home-card :title="item.title" :background="item.background" :icon="item.icon"
                                        :value="item.value"></home-card>
                        </template>
                </div>
                <div>
                        <div style="margin: 20px; display: flex; justify-content: space-between;">
                                <div style="width: 49%; height: 400px; background-color: #ffffff; border-radius: 16px; padding: 10px;">
                                        <pie-chart title="会员情况" height="100%" width="100%" :data="pieExpenseData"
                                                :tooltip="tooltip">
                                        </pie-chart>
                                </div>
                                <div style="width: 49%; height: 400px; background-color: #ffffff; border-radius: 16px;; padding: 10px;">
                                        <bar-chart height="100%" width="100%" title="日用户变化" :data="dayData"
                                                :config="dayConfig">
                                        </bar-chart>
                                </div>
                        </div>
                </div>
        </div>
</template>

<script setup lang='ts'>
import { queryUserStatistics, queryUserMemberInfo, queryDayUserInfo } from '@/api/user/userManager/index';
import { message } from 'ant-design-vue';
import dayjs from 'dayjs';

const statisticsInfo = [
        {
                title: '用户总数',
                icon: 'userHome',
                value: 0,
                background: 'linear-gradient(to right bottom, rgb(236, 71, 134), rgb(185, 85, 164))'
        },
        {
                title: '会员总数',
                icon: 'vipHome',
                value: 0,
                background: 'linear-gradient(to right bottom, rgb(134, 94, 192), rgb(81, 68, 180))'
        },
        {
                title: '访问数',
                icon: 'visitHome',
                value: 0,
                background: 'linear-gradient(to right bottom, rgb(86, 205, 243), rgb(113, 157, 227))'
        }
];

export interface barItem {
        xAxis?: string[];
        series?: string[][];
        yTitle?: string;
        xTile: string,
        yNameGap?: number;
        tooltip?: {};
        legend?: [];
        color?: string;
}

let pieExpenseData = ref<object[]>([]);

let tooltip = {};

export interface barItem {
        xAxis?: string[];
        series?: string[][];
        yTitle?: string;
        xTile: string,
        yNameGap?: number;
        tooltip?: {};
        legend?: [];
        color?: string;
}

let dayConfig = ref<barItem>({
        xAxis: [],
        series: [],
        xTile: "天数",
        yTitle: "个",
        yNameGap: 30,
        tooltip: {},
        legend: [],
        color: "#aa55ff",
});

let dayData = ref<any>([]);

const init = async () => {
        Promise.all([queryUserStatistics(), queryUserMemberInfo(), queryDayUserInfo()]).then((res) => {
                let { code: statisticsCode, data: statisticsData } = res[0];
                if (statisticsCode == 200) {
                        statisticsInfo[0].value = statisticsData.userCount;
                        statisticsInfo[1].value = statisticsData.memberCount;
                        statisticsInfo[2].value = statisticsData.visitCount;
                } else {
                        message.error('获取用户统计信息失败');
                }
                let { code: memberCode, data: memberData } = res[1];
                if (memberCode == 200) {
                        pieExpenseData.value = [{ name: '会员数', value: memberData.memberCount }, { name: '非会员数', value: memberData.userCount - memberData.memberCount }];
                } else {
                        message.error('获取用户会员信息失败');
                }
                let { code: dayCode, data: resData } = res[2];
                if (dayCode == 200) {
                        let xAxis = [] as any[];
                        if (resData.length > 0) {
                                resData.forEach((element: any) => {
                                        dayData.value.push(element.newUsersCount);
                                        xAxis.push(dayjs(element.registrationDate).format('MM.DD'));
                                });
                        }
                        dayConfig.value.xAxis = xAxis;
                } else {
                        message.error('获取用户会员信息失败');
                }
        })
}

init();
</script>

<style lang="scss" scoped>
.statistic-info {
        margin: 0px 20px 20px 20px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 20px;
        background-color: #ffffff;
        padding: 10px;
}

.statistic-info>div {
        flex: 1 1 calc(33% - 20px);
        /* 每个卡片占 25% 的宽度，并减去间隙 */
        max-width: calc(33% - 20px);
        /* 设置最大宽度，确保每行显示 4 个 */
}
</style>